<template>
  <el-form ref="form" :model="form" label-width="120px" style="width: 50%">
    <el-form-item label="保存至文件夹">
      <input type="file" id="file" hidden @change="fileChange" webkitdirectory>
      <el-input placeholder="请输入内容" v-model="form.imgSavePath" class="input-with-select">
        <el-button slot="append" icon="el-icon-folder" type="success" @click="btnChange"></el-button>
      </el-input>
    </el-form-item>data() {
    return {
      form: {
        imgSavePath: ''
      }
    }
  },
  methods: {
    fileChange(e) {
      try {
        const fu = document.getElementById('file')
        if (fu == null) return
        this.form.imgSavePath = fu.files[0].path
        console.log(fu.files[0].path)
      } catch (error) {
        console.debug('choice file err:', error)
      }
    },
    btnChange() {
      var file = document.getElementById('file')
      file.click()
    }
  }

  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        imgSavePath: ''
      }
    }
  },
  methods: {
    fileChange(e) {
      try {
        const fu = document.getElementById('file')
        if (fu == null) return
        this.form.imgSavePath = fu.files[0].path
        console.log(fu.files[0].path)
      } catch (error) {
        console.debug('choice file err:', error)
      }
    },
    btnChange() {
      var file = document.getElementById('file')
      file.click()
    }
  }
}
</script>

<style scoped>

</style>